import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View,
    LayoutAnimation,
    TouchableWithoutFeedback,
    Platform,
    BackAndroid,
} from 'react-native';
import KeyBoardView     from './KeyBoardView';
import * as BackHandler from "react-native/Libraries/Utilities/BackHandler.android";

const INPUT_HEIGHT = 45;

/** 输入框组件 */
export default class InputView extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mText       : '',
            mDeltaY   : INPUT_HEIGHT,
        }
    }

    render(){
        return (
            <View style={{height: this.state.mDeltaY}}>
                <View style={styles.flexTop}>
                    <TouchableWithoutFeedback onPress={() => {this.showKeyBoard()}}>
                        <View style={styles.inputView} >
                            <Text
                                style={styles.inputText}>
                                {this.state.mText}
                            </Text>
                        </View>
                    </TouchableWithoutFeedback>
                    <View style={styles.btn}>
                        <Text style={styles.search} onPress={() => this.dismissKeyBoard(true)}>搜索</Text>
                    </View>
                </View>
                <KeyBoardView ref="keyboard" callBack={(text, isLongPress) => this._onKeyClick(text, isLongPress)}/>
            </View>
        );
    }

    /** 显示键盘，最好能把当前键盘高度回调出去 */
    showKeyBoard(){
        LayoutAnimation.spring();
        this.setState({
            mDeltaY    : INPUT_HEIGHT + this.refs.keyboard.getHeight(),
        });

    }

    /** 隐藏键盘，最好能把当前键盘高度回调出去 */
    dismissKeyBoard(isToQuery){
        LayoutAnimation.spring();
        this.setState({
            mDeltaY    :  INPUT_HEIGHT,
        });
        if(!isToQuery) return;
        this.props.onPress(this.state.mText);
    }

    _onKeyClick(text:String, isLongPress:boolean){
        if(text === '←'){
            if(this.state.mText.length <= 0) return;
            if(!isLongPress){
                this.setState({
                    mText: this.state.mText.substring(0, this.state.mText.length - 1)
                });
            }
            else{
                this.setState({
                    mText: ''
                });
            }
        }
        else{
            this.setState({
                mText: this.state.mText.concat(text),
            });
        }
    }

    getHeight(){
        return INPUT_HEIGHT;
    }

    /**
     * @returns {boolean} 我是否已处理返回事件(是否无须系统再处理)
     */
    onBackAndroid = () => {
        // 键盘弹出状态
        if(this.state.mDeltaY === INPUT_HEIGHT + this.refs.keyboard.getHeight()){
            this.dismissKeyBoard(false);
            return true;
        }
        else{
            return false;
        }
    };

    componentWillMount() {
        if(Platform.OS !== 'android') return;
        // BackAndroid.addEventListener('hardwareBackPress', this.onBackAndroid);
        BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
    }
    componentWillUnmount() {
        if(Platform.OS !== 'android') return;
        // BackAndroid.removeEventListener('hardwareBackPress', this.onBackAndroid);
        BackHandler.removeEventListener('hardwareBackPress', this.onBackAndroid);
    }
}

//样式定义
const styles = StyleSheet.create({
    flexTop:{
        flexDirection:'row',
        alignItems:'flex-end',
        backgroundColor: '#FFFFFF',
    },
    flexDirection:{
        flexDirection:'row'
    },
    inputHeight:{
        height:INPUT_HEIGHT,
    },
    inputView:{
        flex: 1,
        height:INPUT_HEIGHT,
        borderWidth:1,
        borderColor: '#ccc',
        justifyContent: 'center',
    },
    inputText:{
        fontSize: 25,
        paddingLeft:10,
        fontWeight:'bold',
    },
    btn:{
        width:55,
        marginLeft:-1,
        backgroundColor:'#23BEFF',
        height:INPUT_HEIGHT,
        justifyContent:'center',
        alignItems: 'center',
    },
    search:{
        color:'#fff',
        fontSize:18,
        fontWeight:'bold',
    },
});
